<script setup>
import { ref } from 'vue'
import { HomeOutlined, PlusCircleOutlined } from '@ant-design/icons-vue'
import VolunteerDetail from './VolunteerDetail/index.vue'
import SubmitVolunteer from './SubmitVolunteer/index.vue'
// import { useUserStore } from '@/stores'

const tabList = [
  {
    key: 'tab1',
    tab: '志愿者活动列表'
  },
  {
    key: 'tab2',
    tab: '新增志愿活动'
  }
]

const key = ref('tab1')
const noTitleKey = ref('app')
const onTabChange = (value, type) => {
  console.log(value, type)
  if (type === 'key') {
    key.value = value
  } else if (type === 'noTitleKey') {
    noTitleKey.value = value
  }
}
</script>
<template>
  <div class="container">
    <a-card
      style="width: 100%; height: 100%"
      title="志愿服务活动"
      :tab-list="tabList"
      :active-tab-key="key"
      @tabChange="(key) => onTabChange(key, 'key')"
    >
      <template #customTab="item">
        <span v-if="item.key === 'tab1'">
          <home-outlined />{{ item.tab }}
        </span>
        <span v-if="item.key === 'tab2'">
          <PlusCircleOutlined />{{ item.tab }}
        </span>
      </template>

      <template #extra>
        <a href="#">More</a>
      </template>
      <div v-if="key === 'tab1'"><volunteer-detail /></div>
      <div v-if="key === 'tab2'"><submit-volunteer /></div>
    </a-card>
    <br />
    <br />
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}
</style>
